import React, { useContext, useEffect, useState, useCallback, useMemo, useRef } from 'react';
import { useTranslation, getI18n } from 'react-i18next';
import style from './index.module.scss'
import WhiteHeightSpace from '@/components/WhiteSpace/WhiteHeightSpace';
import { isMobileHandle } from '@/utils/utils'
import TitleBar from './components/title'
import JoinNode from './components/joinNode'
import ActiveNode from './components/activeNode'
import { ActiveNodeTypeEnum, JoinNodeTypeEnum, NftJoinAndActiveEnum, NodePromoteTypeEnum } from '@/enum';
import { useHistory } from 'react-router-dom';
import RouterConfig from '@/object/RouterConfig';
interface IProps{
    account: undefined | null | string
}
const JoinAndActive = (props: IProps) => {
    const { push } = useHistory()
    const [isMobile, setIsMobile] = useState(isMobileHandle())
    const { t } = useTranslation();
    const { language } = getI18n()
    const [nodeStatus, setNodeStatus] = useState<string>(NftJoinAndActiveEnum.JOIN_NODE_STATUS)
    const contentRef = useRef<any>(null)
    const [mintModalVisible, setMintModalVisible] = useState<boolean>(false)
    const [activeModalVisible, setActiveModalVisible] = useState<boolean>(false)
    const account = useMemo(() => {
        return props.account
    }, [props.account])

    useEffect(() => {
        window.addEventListener('resize', () => {
            setTimeout(() => {
                setIsMobile(isMobileHandle());
            }, 0);
        });
        return () => {
            window.removeEventListener('resize', () => { });
        };
    }, [])

    return (
        <>
            <div className={style.container} ref={contentRef}>
                <TitleBar
                    isMobile={isMobile}
                    account={account}
                    language={language}
                />
                <WhiteHeightSpace height={'30px'} />
                <div className={style.content}>
                    <div className={style.joinNodeTitle}>{t("minting and joining node")}</div>
                    {/* <div onClick={() => {
                        dowloadImage()
                    }}
                        style={{
                            width: '100%',
                            textAlign: 'center'
                        }}
                    >下载图片</div> */}
                    <div className={style.joinNodeSubTitle}>{t("Join the node, complete the activation to enjoy multi-level network fission commission sharing")}</div>
                    <div className={style.spaceBetweenFunc}>
                        <div className={style.spaceBetweenAddNodeContainer}>
                            <div className={style.spaceLabelTitle} >
                                {t("join NFT node")}
                            </div>
                            <WhiteHeightSpace height={'25px'} />
                            <JoinNode
                                type={JoinNodeTypeEnum.COMMON_NODE_JOIN_CODE}
                                isMobile={isMobile}
                                account={account}
                                language={language}
                                callbackUpdateStatus={() => {
                                    //加入节点之后 刷新 待质押列表
                                    setNodeStatus(NftJoinAndActiveEnum.ACTIVE_CODE_STATUS)
                                    setMintModalVisible(true)
                                    setTimeout(() => {
                                        setNodeStatus(NftJoinAndActiveEnum.JOIN_NODE_STATUS) //还原
                                    }, 1000)
                                }}
                            />

                        </div>
                        {
                            isMobile && <WhiteHeightSpace height={'67px'} />
                        }
                        <div className={style.spaceBetweenActiveNodeContainer}>
                            <div className={style.spaceLabelTitle}>
                                {t("activate NFT node")}
                            </div>
                            <WhiteHeightSpace height={isMobile ? '21px' : '25px'} />
                            <ActiveNode
                                type={ActiveNodeTypeEnum.COMMON_NODE_ACTIVE_CODE}
                                isMobile={isMobile}
                                account={account}
                                language={language}
                                nodeStatus={nodeStatus}
                                callbackUpdateStatus={() => {
                                    //激活成功之后 刷新 待质押列表
                                    setNodeStatus(NftJoinAndActiveEnum.ACTIVE_CODE_STATUS)
                                    setActiveModalVisible(true)
                                    setTimeout(() => {
                                        setNodeStatus(NftJoinAndActiveEnum.JOIN_NODE_STATUS) //还原
                                    }, 1000)
                                }}
                            />
                        </div>
                    </div>
                    <WhiteHeightSpace height={isMobile ? '60px' : '113px'} />
                </div>
            </div>
        </>
    )
}
export default JoinAndActive